<!--
* @author wn
* @date 2022/04/28 14:54:46
* @description: 主页面板
* 标题 子标题 -- props
* 右侧具名插槽 下面 默认插槽
!-->
<template>
	<div class="home-panel">
		<div class="container">
			<!-- 头部 -->
			<div class="head">
				<h3>
					{{ title }}<small>{{ subTitle }}</small>
				</h3>
				<!-- 右上角插槽 -->
				<slot name="right" />
			</div>
			<!-- 面板内容 -->
			<slot />
		</div>
	</div>
</template>
<script>
export default {
	name: 'HomePanel',
	props: {
		// 标题
		title: {
			type: String,
			default: '',
		},
		// 副标题
		subTitle: {
			type: String,
			default: '',
		},
	},
}
</script>
<style scoped lang="less">
.home-panel {
	background-color: #fff;
	.head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 40px 0;
		h3 {
			font-size: 32px;
			font-weight: normal;
			margin-left: 6px;
			height: 35px;
			line-height: 35px;
			small {
				font-size: 16px;
				color: #999;
				margin-left: 20px;
			}
		}
	}
}
</style>
